<template>
  <div>
      <my-head title="帮助中心" :go="true " :ri="false"></my-head> 

<div class="top"> 
<div class="left">
  <img src="@/assets/3333_03.png" alt="">
 <ul>
   <li>在线客服</li>
   <li class="li1">一对一专属客服</li>
 </ul>
</div>
<div class="right">
   <img src="@/assets/3333_05.png" alt="">
 <ul>
   <li>电话客服</li>
   <li class="li1">拨打客服热线</li>
 </ul>
</div>
</div>
<div class="p2">常见问题  <a href="#">更多</a> </div>

<div class="input">
<img src="@/assets/查找.png" alt="">
<input type="text">
</div>

<p class="p1">注册收不到短信验证码怎么办？ <img src="@/assets/箭头.png" alt=""> </p>
<p class="p1">小荷在线用户服务协议 <img src="@/assets/箭头.png" alt=""> </p>
<p class="p1">什么事可用余额？ <img src="@/assets/箭头.png" alt=""> </p>
<p class="p1">什么是投资红包？ <img src="@/assets/箭头.png" alt=""> </p>


<div class="p3">
<ul>
  <li><img src="@/assets/gg_03.png" alt=""></li>
  <li>新手注册</li>
</ul>
<ul>
  <li><img src="@/assets/gg_05.png" alt=""></li>
  <li>找回密码</li>
</ul>
<ul>
  <li><img src="@/assets/gg_07.png" alt=""></li>
  <li>更换密码</li>
</ul>
</div>

<div class="p4">
<ul>
  <li><img src="@/assets/gg_12.png" alt=""></li>
  <li>提现</li>
</ul>
<ul>
  <li><img src="@/assets/gg_13.png" alt=""></li>
  <li>充值</li>
</ul>
<ul>
  <li><img src="@/assets/gg_14.png" alt=""></li>
  <li>我要投资</li>
</ul>
</div>

  </div>
</template>

<script>
import Head from '@/components/Head'
export default {
components:{
    myHead:Head
  },
}
</script>

<style scoped lang="less">


.p4 ul {
  float: left;
  list-style: none;
  flex: 1;
  margin-top: .1rem;
}
.p4 {
  font-size: 0.08rem;
  display: flex;
  text-align: center;
  margin-top: 0.2rem
}
.p4 ul li{
 margin-top: 0.1rem
}

.p4 img {
  width: .45rem;
}

.p3 ul {
  float: left;
  list-style: none;
  flex: 1;
  margin-top: .1rem;
}
.p3 {
  font-size: 0.08rem;
  display: flex;
  text-align: center;
    margin-top: 0.5rem;
 
}
.p3 ul li{
 margin-top: 0.1rem
}

.p3 img {
  width: .45rem;
}
.p1{
  width: 100%;
  // float: left;
    margin-left: 0.1rem;
    //    margin-left: 0.1rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
  img{
    width: 0.12rem;
    float: right;
    margin-right: 0.2rem
  }
}

.input{
  width: 3.4rem;
  height: 0.325rem;
  border: 0.01rem solid #f4f4f4;
 margin-left: 0.16rem;
     margin-bottom: 0.3rem;
 img{
   width: 0.2rem;
margin: 0.05rem;

 }

 input{

   position: absolute;
   top: 1.92rem;
   border: none;
  outline:none;
 }
}

  .p2{
    text-align: center;
    
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    a{
      position: absolute;
      right: 0.2rem;
      color: #c8c8c8;
      
    }
  }

.top{
  width: 100%;
display: flex
}

.left{
  width: 1.66rem;
  height: 0.725rem;
  border: 0.01rem solid  #f4f4f4;
  margin: 3%;
  img{
    margin-top: 0.05rem;
    width: 0.36rem;
    margin-left: 0.075rem;
    margin-top: 0.175rem;
    float: left;
  }

ul{
  margin-left: 0.5rem;
  margin-top: 0.175rem
}

.li1{
  color: #c8c8c8;
  font-size: 0.12rem;
   margin-top: 0.05rem
}

}
.right{
  width: 1.66rem;
  height: 0.725rem;
  border: 0.01rem solid  #f4f4f4;
   margin: 3%;
  img{
    margin-top: 0.05rem;
    width: 0.36rem;
    margin-left: 0.075rem;
    margin-top: 0.175rem;
    float: left;
  }

ul{
  margin-left: 0.5rem;
  margin-top: 0.175rem
}

.li1{
  color: #c8c8c8;
  font-size: 0.12rem;
   margin-top: 0.05rem
}
}
</style>
